<template>
  <div class="left left-box">
    <div class="info-box load-hidden srbox text-center radius20 change-bg padding10 shadow">
        <div class="radius50 text-center"> <img src="@/assets/images/index/portrait.jpeg" alt=""/> </div>
        <h2 class="space1">Liu Tingting</h2>
        <ul class="flex-around">
            <li class="pointer"> <div>文章</div> <div>123</div> </li>
            <li class="pointer"> <div>文章</div> <div>123</div> </li>
            <li class="pointer"> <div>文章</div> <div>123</div> </li>
        </ul>
        <button class="learn-more">前往小窝</button>
    </div>
    <Search class="srbox" />
    <!-- <div class="search-box">

    </div> -->

    <div class="other-box">

    </div>
</div>
</template>
<script setup lang="ts">

import Search from './Search'


import {ref,reactive} from "vue"
const { $scrollReveal } = useNuxtApp()

onMounted(() => {
  // console.log($scrollReveal)
  $scrollReveal.reveal('.srbox', {
    reset: false,   // 滚动鼠标时，动画开关(默认是false没有打开鼠标滚动的动画开关)
        origin: 'right', // 动画开始的方向
        duration: 500,   // 动画持续时间
        delay: 200, // 延迟
        rotate: {x:0, y:0, z:0},  // 过度到0的初始角度
        opacity: 0.2, // 初始透明度  (0.2到1的效果)
        scale:.7,       //缩放
        easing: 'ease-in-out', //动画效果// 缓动'ease', 'ease-in-out'，'linear'...
  });
})

</script>
<style lang="scss" scoped>
.left-box {
       flex: 1;
        position: sticky;
        top: 15px;
        // background: #fff;
        .info-box {
          color: var(--c000);
          &>div:first-child {
            width: 100px;
            height: 100px;
            margin: 13px auto;
            overflow: hidden;
            &:hover {
              -webkit-animation: rotate-center 0.3s ease-in-out both;
	            animation: rotate-center 0.3s ease-in-out both;
            }
            img {
              height: 100%;
              width: 100%;
            }
          }
          h2 {
            font-size: 22px;
            margin: 20px 0;
          }
          
        }
      }


// 按钮样式
$text: #382b22;
$light-pink: #fff0f0;
$pink: #ffe9e9;
$dark-pink: #f9c4d2;
$pink-border: #b18597;
$pink-shadow: #ffe3e2;

button {
  position: relative;
  display: inline-block;
  cursor: pointer;
  outline: none;
  border: 0;
  vertical-align: middle;
  text-decoration: none;
  font-size: inherit;
  font-family: inherit;
  margin: 20px 0;
  &.learn-more {
    font-weight: 600;
    color: $text;
    text-transform: uppercase;
    padding: 5px 20px;
    background: $light-pink;
    border: 2px solid $pink-border;
    border-radius: 0.75em;
    transform-style: preserve-3d;
    transition: transform 150ms cubic-bezier(0, 0, 0.58, 1), background 150ms cubic-bezier(0, 0, 0.58, 1);
    &::before {
      position: absolute;
      content: '';
      width: 100%;
      height: 80%;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: $dark-pink;
      border-radius: inherit;
      box-shadow: 0 0 0 2px $pink-border, 0 0.425em 0 0 $pink-shadow;
      transform: translate3d(0, 0.75em, -1em);
      transition: transform 150ms cubic-bezier(0, 0, 0.58, 1), box-shadow 150ms cubic-bezier(0, 0, 0.58, 1);
    }
    &:hover {
      background: $pink;
      transform: translate(0, 0.25em);
      &::before {
        box-shadow: 0 0 0 2px $pink-border, 0 0.3em 0 0 $pink-shadow;
        transform: translate3d(0, 0.5em, -1em);
      }
    }
    &:active {
      background: $pink;
      transform: translate(0em, 0.55em);
      &::before {
        box-shadow: 0 0 0 2px $pink-border, 0 0 $pink-shadow;
        transform: translate3d(0, 0, -1em);
      }
    }
  }
}

</style>
